import { defineComponent, ref, SetupContext, reactive } from 'vue';
import { AiMasterProps, aiMasterProps } from "./ai-master-props";
import './ai-master.scss';

export default defineComponent({
    name: 'FAiMaster',
    props: {
        ...aiMasterProps,
        sender: String,
        authorization: String,
        apiUrl: String
    },
    setup(props: AiMasterProps & { sender: string; authorization: string; apiUrl: string }, setupContext: SetupContext) {
        console.log("Sender:", props.sender);
        console.log("Authorization:", props.authorization);
        console.log("API URL:", props.apiUrl);

        const remote = props.remote;
        const messageDemo = reactive({
            items: [{}],
        });
        let title = "测试";
        const textarea = '';
        function sendingMessage() {
            const inputElement = document.getElementById('textMessage') as HTMLInputElement;
            if (inputElement) {
                const inputValue = inputElement.value;
                const newMess = { sender: props.sender, content: inputValue };
                messageDemo.items.push(newMess);
                const newMess1 = { sender: "AI经理人", content: "我已收到消息【" + inputValue + "】" };
                messageDemo.items.push(newMess1);
                const data = {
                    model: 'gpt-3.5-turbo',
                    messages: [{
                        "role": "system",
                        "content": "这个系统是设计来支持广泛的管理和个人发展理论，包括但不限于SMART目标设置原则，以及A+经理人涉及的全部理论知识。它旨在为用户提供详尽的问题答案和解决方案，通过深入的解释和逻辑来增强用户的理解和应用。系统覆盖的内容包括目标设定、时间管理、团队合作、领导力发展、决策制定等关键领域，旨在帮助用户在各方面达成卓越。请在提问时详细说明您的情况和需求，使得系统能够根据包括SMART在内的各种理论框架，提供最合适的答案和策略。"
                    },
                    {
                        "role": "user",
                        "content": inputValue
                    }
                    ],
                    "max_tokens": 1000,
                    "temperature": 0.7
                };
                // 设置头部信息，指示正在发送JSON数据
                const headers = new Headers({
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${props.authorization}`
                });
                const postDataParam = JSON.stringify(data);
                fetch(props.apiUrl, {
                    method: 'POST',
                    headers: headers,
                    body: postDataParam
                })
                    .then(response => {
                        if (response.ok) {
                            return response.json(); // 如果返回数据不是JSON，可以省略这一步
                        }
                        throw new Error('Network response was not ok.');
                    }).then(data => {
                        console.log(data);
                        if (data && data.choices) {
                            const newMess2 = { sender: "AI经理人", content: "我的回答是【" + data.choices[0].message.content + "】" };
                            messageDemo.items.push(newMess2);
                        }

                    })
                    .catch(error => console.error('There has been a problem with your fetch operation:', error));
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            const inputElement = document.getElementById('textMessage') as HTMLInputElement;

            inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
                // 检查按下的键是否是回车键
                if (event.key === 'Enter' || event.keyCode === 13) {
                    // 回车事件被触发
                    console.log('回车键被按下');
                    sendingMessage();
                }
            });
        });
        return () => {
            return (
                <div class="you">
                    {
                        messageDemo.items.map((item: any) => {
                            return (
                                <div>
                                    {item.sender == props.sender && (
                                        <div class="message you">
                                            <div class="triangle_right"></div>
                                            <div class="right_message">{item.sender} : {item.content}</div>
                                        </div>
                                    )}
                                    {item.sender == 'AI经理人' && (
                                        <div>
                                            <div class="triangle_left"></div>
                                            <div class="left_message">{item.sender} : {item.content} </div>

                                        </div>
                                    )}
                                </div>
                            );
                        })}
                    <div class="chat-input">
                        <input type="textarea" id="textMessage" v-model={textarea}></input>
                        <button type="button" class="chat-input button" onClick={sendingMessage}>发送按钮</button>
                    </div>
                </div>
            );
        };
    },
});
